<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>药品管理</title>
  <link rel="stylesheet" href="../../css/sysmgmt(系统管理-人员管理).css" />
  <link rel="stylesheet" href="../../lib/bootstrap-3.4.1-dist/css/bootstrap.min.css" />
  <script src="../../lib/JQuery/jquery-1.11.3.js"></script>
  <script src="../../lib/bootstrap-3.4.1-dist/js/bootstrap.min.js"></script>
</head>

<body>
  <div class="container-fluid">
    <div class="row">
      <div class="col-lg-12">
        <div id="searchBox">
          <form class="form-inline">
            <div class="form-group">
              <input type="text" class="form-control" id="searchName" placeholder="请输入药品名称" />
            </div>
            <div class="form-group">
              <select id="searchDrugType" class="form-control">
                <option value="null">药品分类</option>
                <option value="西药">西药</option>
                <option value="中药">中药</option>
                <option value="其他类型">其他类型</option>
              </select>
            </div>
          </form>
          <button class="btn btn-default" id="searchBtn">
            <span class="glyphicon glyphicon-search"></span> 查询
          </button>
          <button class="btn btn-default" id="reset">
            <span class="glyphicon glyphicon-repeat"></span> 清空
          </button>
        </div>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div id="optionBox">
          <button class="btn btn-default" id="append" data-toggle="modal" data-target="#appendDiv">
            + 新增药品
          </button>
          <button class="btn btn-default" id="export">
            <span class="glyphicon glyphicon-open"></span> 导出
          </button>
          <button class="btn btn-default" id="import">
            <span class="glyphicon glyphicon-save"></span> 导入
          </button>
          <button class="btn btn-default" id="searchdel">
            <span class="glyphicon glyphicon-trash"></span> 删除
          </button>
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <table id="table" class="table table-hover">
          <thead>
            <tr>
              <td>
                <input type="checkbox" id="inlineCheckbox1" value="option1" />
                ID
              </td>
              <td>药品名称</td>
              <td>药品图片</td>
              <td>市场价</td>
              <td>售价</td>
              <td>药片分类</td>
              <td>启用状态</td>
              <td>操作</td>
            </tr>
          </thead>

          <tbody id="tableBox">
            <!-- 数据渲染在这 -->
          </tbody>
        </table>
      </div>
    </div>

    <div class="row">
      <div class="col-lg-12">
        <div id="pageBox">
          <span>共<span id="totPage"></span><span>条</span></span>
          <select id="selectShowPageNum" class="form-control">
            <option value="0">10条/页</option>
            <option value="1">20条/页</option>
            <option value="2">50条/页</option>
          </select>
          <span id="prePage" class="glyphicon glyphicon-chevron-left"></span>
          <span id="pageDiv">
            <!-- 页码渲染在这里 -->
          </span>
          <span id="nextPage" class="glyphicon glyphicon-chevron-right"></span>
          <span>前往
            <input type="text" id="goPageNum" class="form-control" /><span>
              页</span></span>
          <span id="goPage">跳转</span>
        </div>
      </div>
    </div>
  </div>

  <!-- 增加模态框 -->
  <div class="modal fade" id="appendDiv" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="exampleModalLabel">新增药品</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-id" class="control-label">药品ID</label>
              <input type="text" class="form-control" id="id" required />
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">药品名称</label>
              <input type="text" class="form-control" id="name" />
            </div>
            <div class="form-group">
              <label for="recipient-price" class="control-label">市场价</label>
              <input type="text" class="form-control" id="price" />
            </div>
            <div class="form-group">
              <label for="recipient-sold" class="control-label">售价</label>
              <input type="text" class="form-control" id="sold" />
            </div>
            <div class="form-group">
              <label class="control-label">药品分类</label>
              <select id="yaopinType" class="form-control">
                <option value="0">选择分类</option>
                <option value="中药">中药</option>
                <option value="西药">西药</option>
                <option value="其他类型">其他类型</option>
              </select>
            </div>
            <div class="form-group">
              功能主治：
              <textarea class="form-control" rows="3"></textarea>
            </div>
            <div class="form-group">
              不良反应：
              <textarea class="form-control" rows="3"></textarea>
            </div>
            <div class="form-group">
              注意事项：
              <textarea class="form-control" rows="3"></textarea>
            </div>
            <div class="form-group">
              <label class="control-label">生产厂商：</label>
              <select id="company" class="form-control">
                <option value="0">选择厂商</option>
                <option value="厂商1">厂商1</option>
                <option value="厂商2">厂商2</option>
                <option value="厂商3">厂商3</option>
              </select>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            关闭
          </button>
          <button type="button" id="save" class="btn btn-primary">
            保存
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- 删除模态框 -->
  <div class="modal fade" id="delDiv" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-body">
          确认删除后，药品将被彻底删除，是否确认删除？
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            关闭
          </button>
          <button type="button" id="del" class="btn btn-primary">删除</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改模态框 -->
  <div class="modal fade" id="xiugaiDiv" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
          <h4 class="modal-title" id="exampleModalLabel">修改</h4>
        </div>
        <div class="modal-body">
          <form>
            <div class="form-group">
              <label for="recipient-id" class="control-label">药品ID</label>
              <input type="text" class="form-control" id="id" required />
            </div>
            <div class="form-group">
              <label for="recipient-name" class="control-label">药品名称</label>
              <input type="text" class="form-control" id="name" />
            </div>
            <div class="form-group">
              <label for="recipient-price" class="control-label">市场价</label>
              <input type="text" class="form-control" id="price" />
            </div>
            <div class="form-group">
              <label for="recipient-sold" class="control-label">售价</label>
              <input type="text" class="form-control" id="sold" />
            </div>
            <div class="form-group">
              <label class="control-label">药品分类</label>
              <select id="yaopinType" class="form-control">
                <option value="0">选择分类</option>
                <option value="中药">中药</option>
                <option value="西药">西药</option>
                <option value="其他类型">其他类型</option>
              </select>
            </div>
            <div class="form-group">
              功能主治：
              <textarea class="form-control" rows="3"></textarea>
            </div>
            <div class="form-group">
              不良反应：
              <textarea class="form-control" rows="3"></textarea>
            </div>
            <div class="form-group">
              注意事项：
              <textarea class="form-control" rows="3"></textarea>
            </div>
            <div class="form-group">
              <label class="control-label">生产厂商：</label>
              <select id="company" class="form-control">
                <option value="0">选择厂商</option>
                <option value="厂商1">厂商1</option>
                <option value="厂商2">厂商2</option>
                <option value="厂商3">厂商3</option>
              </select>
            </div>
          </form>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">
            关闭
          </button>
          <button type="button" id="xiugai" class="btn btn-primary">
            保存
          </button>
        </div>
      </div>
    </div>
  </div>

  <script>
    // 模拟数据
    let arr = [
      {
        id: 1,
        name: '长效西林',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "管理员",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 2,
        name: '心痛定',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "主治医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 3,
        name: '左旋布洛芬',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "管理员",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 4,
        name: '消炎痛',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "药师",
        contact: "18868803516",
        dept: "市场部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 5,
        name: '阿米卡星',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "管理员",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 6,
        name: '他巴唑',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "主治医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 7,
        name: '大仑丁',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "服务部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 8,
        name: '头孢',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "药师",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 9,
        name: '百炎尽',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "药师",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 10,
        name: '胃舒平',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 11,
        name: '克罗米芬',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 12,
        name: '扶他林',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "主治医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 13,
        name: '阿莫西林',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 14,
        name: '999感冒灵',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 15,
        name: '板蓝根',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 16,
        name: '胰岛素',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 17,
        name: '杜冷丁',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 18,
        name: '心先安',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 19,
        name: '布洛芬胶囊',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 20,
        name: '藿香正气液',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 21,
        name: '奥必欣',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 22,
        name: '科苏',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 23,
        name: '洛丁新',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 24,
        name: '诺和龙',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 25,
        name: '仁苏',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 26,
        name: '利血平',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '西药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 27,
        name: '党参',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 28,
        name: '山药',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 29,
        name: '白术',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 30,
        name: '甘草',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 31,
        name: '鹿茸',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "客服部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 32,
        name: '紫河车',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 33,
        name: '仙茅',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "总部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 34,
        name: '肉苁蓉',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 35,
        name: '海马',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 36,
        name: '当归',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 37,
        name: '首乌',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 38,
        name: '阿胶',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 39,
        name: '桑葚子',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 40,
        name: '沙参',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 41,
        name: '黄丝',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 42,
        name: '太子参',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 43,
        name: '西洋参',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 44,
        name: '蛇床子',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 45,
        name: '冬虫夏草',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 46,
        name: '巴戟天',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 47,
        name: '胡桃仁',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 48,
        name: '锁阳',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 49,
        name: '益智仁',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
      {
        id: 50,
        name: '狗脊',
        icon: "glyphicon glyphicon-heart-empty",
        price: '￥30.0',
        sold: '￥30.0',
        drugtype: '中药',
        zhiwei: "医生",
        contact: "18868803516",
        dept: "研发部",
        creTime: "2022-10-10 12:00:00",
        switch: "1",
      },
    ];

    // 初始化
    let showArr = [];
    let presentPage = 1;
    let presentData = [];
    let maxPage;
    let showPageNum = 10;
    let delId;
    // 时间
    let time = new Date();
    let year = time.getFullYear();
    let month = time.getMonth() + 1;
    let date = time.getDate();
    let hour = time.getHours();
    let minute = time.getMinutes();
    let second = time.getSeconds();
    let presentTime =
      year +
      "-" +
      month +
      "-" +
      date +
      " " +
      +hour +
      ":" +
      minute +
      ":" +
      second;
    resetPage();

    // 渲染表格数据
    function show(data) {
      $("#tableBox").html("");
      for (let i = 0; i < data.length; i++) {
        $("#tableBox").append(`
      <tr>
          <td><input type="checkbox" id="inlineCheckbox1" value="option1"> ${data[i].id
          }</td>  
          <td>${data[i].name}</td>  
          <td><span class='${data[i].icon}'></span></td>
          <td>${data[i].price}</td>  
          <td>${data[i].sold}</td>  
          <td>${data[i].drugtype}</td>  
          <td>${data[i].switch == 1
            ? '<input class="switch-btn switch-btn-animbg" type="checkbox" checked>'
            : "0"
          }</td>
          <td>
            <a data-toggle="modal" data-target="#delDiv"
                  data-whatever="@mdo" id = 'delbtn' onclick = 'getDelId(${data[i].id
          })'>删除</a>
                  <a data-toggle="modal" data-target="#xiugaiDiv"
                  data-whatever="@mdo" id = 'xgbtn' onclick = 'xiugaiDefault(${JSON.stringify(
            data[i]
          )})'>修改</a>
          </td>  
      </tr>`);
      }
    }

    // 切割并为show提供数据
    function showData(data, pageNum) {
      let qishi = (pageNum - 1) * showPageNum;
      presentData = data.slice(qishi, qishi + showPageNum);
      show(presentData);
      $("#totPage").text(showArr.length);
      $("#pageDiv .btn-default")
        .eq(pageNum - 1)
        .addClass("active")
        .siblings()
        .removeClass("active");
      presentPage = pageNum;
    }

    // 渲染页码
    function showPage(data) {
      maxPage = Math.ceil(data.length / showPageNum);
      $("#pageDiv").html("");
      for (let i = 1; i <= maxPage; i++) {
        $("#pageDiv").append(`<span class="btn btn-default">${i}</span>`);
      }

      // 重置按钮
      $("#reset").click(function () {
        resetPage();
      });
    }
    // 初始和重置页面功能,以及清空按钮
    function resetPage() {
      $("#searchName").val("");
      $("#searchGender").val("null");
      $("#searchType").val("0");
      showArr = [...arr];
      showPage(showArr);
      showData(showArr, 1);
    }

    // 跳转
    $("#pageDiv").on("click", ".btn-default", function () {
      showData(showArr, parseInt($(this).text()));
    });

    // 上一页
    $("#prePage").click(function () {
      if (presentPage > 1) {
        let shangyiye = presentPage - 1;
        showData(showArr, shangyiye);
      }
    });

    // 下一页
    $("#nextPage").click(function () {
      if (presentPage < maxPage) {
        let xiayiye = presentPage + 1;
        showData(showArr, xiayiye);
      }
    });
    // ================================查询====================================
    $("#searchBtn").click(function () {
      let searchName = $("#searchName").val();
      let searchDrugType = $("#searchDrugType option:selected").val();

      showArr = [...arr];
      if (searchName != "") {
        for (let i = 0; i < showArr.length; i++) {
          if (showArr[i].name != searchName) {
            showArr.splice(i, 1);
            i--;
          }
        }
      }

      if (searchDrugType != 'null') {
        for (let i = 0; i < showArr.length; i++) {
          if (showArr[i].drugtype != searchDrugType) {
            showArr.splice(i, 1);
            i--;
          }
        }
      }

      showPage(showArr);
      showData(showArr, 1);
    }
    );

    // ================================新增药品================================
    $("#save").on("click", function () {
      let drugObj = {
        id: $("#appendDiv").find(".modal-body #id").val(),
        name: $("#appendDiv").find(".modal-body #name").val(),
        icon:"glyphicon glyphicon-heart-empty",
        price: $("#appendDiv").find(".modal-body #price").val(),
        sold: $("#appendDiv").find(".modal-body #sold").val(),
        drugtype: $("#appendDiv").find("#yaopintype option:selected").val(),
        creTime: presentTime,
        switch: 1,
      };

      // 重新渲染
      arr.push(drugObj);
      showArr.push(drugObj);
      showPage(showArr);
      showData(showArr, maxPage);

      // 隐藏添加模态框
      $("#appendDiv").modal("hide");
    });

    // ================================删除药品================================
    function getDelId(id) {
      delId = id;
    }

    $("#del").click(function () {
      for (let i = 0; i < showArr.length; i++) {
        if (showArr[i].id == delId) {
          showArr.splice(i, 1);
        }
      }
      $("#delDiv").modal("hide");
      showPage(showArr);
      showData(showArr, 1);
    });

    // ================================修改人员================================
    function xiugaiDefault(stuObj) {
      $("#xiugaiDiv")
        .find(".modal-body #id")
        .val("" + stuObj.id + "");
      $("#xiugaiDiv")
        .find(".modal-body #name")
        .val("" + stuObj.name + "");
      $("#xiugaiDiv")
        .find(".modal-body #price")
        .val("" + stuObj.price + "");
      $("#xiugaiDiv")
        .find(".modal-body #sold")
        .val("" + stuObj.sold + "");
      $("#xiugaiDiv")
        .find(".modal-body #yaopinType")
        .val("" + stuObj.drugtype + "");
    }

    $("#xiugai").click(function () {
      let Obj = {
        id: $("#xiugaiDiv").find(".modal-body #id").val(),
        name: $("#xiugaiDiv").find(".modal-body #name").val(),
        icon:"glyphicon glyphicon-heart-empty",
        price:$("#xiugaiDiv").find(".modal-body #price").val(),
        sold:$("#xiugaiDiv").find(".modal-body #sold").val(),
        drugtype: $("#xiugaiDiv").find("#yaopinType option:selected").val(),
        switch: 1,
        creTime: presentTime,
      };
      console.log(Obj)

      for (let i = 0; i < showArr.length; i++) {
        if (Obj.id == showArr[i].id) {
          showArr[i] = Obj;
        }
      }

      // 隐藏修改模态框
      $("#xiugaiDiv").modal("hide");
      showPage(showArr);
      showData(showArr, 1);
    });

    // =============================改变显示的个数=============================
    $("#selectShowPageNum").click(function () {
      let selectshowPageNum = $("#selectShowPageNum").val();

      if (selectshowPageNum == 0) {
        showPageNum = 10;
      } else if (selectshowPageNum == 1) {
        showPageNum = 20;
      } else if (selectshowPageNum == 2) {
        showPageNum = 50;
      }

      showPage(showArr);
      showData(showArr, 1);
    });

    // ==================================跳转==================================
    $("#goPage").click(function () {
      var reg = /^\d{1,}$/;
      if (reg.test($("#goPageNum").val())) {
        if ($("#goPageNum").val() <= maxPage) {
          showPage(showArr);
          showData(showArr, $("#goPageNum").val());
        }
      }
    });
  </script>
</body>

</html>